<template>
  <f7-page>
    <f7-navbar no-shadow sliding>
      <f7-nav-left>
        <f7-link back icon-f7="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-title"></f7-nav-title>
      <f7-nav-right class="nav-title-right">
        <f7-link icon-f7="ellipsis"></f7-link>
      </f7-nav-right>
    </f7-navbar>

    <f7-block>
      <qm-blankPage
        :src="require('/static/img/blankpage/not-find.png')"
        blanktitle="哎呀，没搜索出来，换个词试试呗！"
      >
        <template v-slot:button>
          <div class="margin">
            <f7-button large small outline round class="button">
              <div class="btn-title">操作一</div>
            </f7-button>
          </div>
          <div>
            <f7-button large small outline round class="button">
              <div class="btn-title">操作二</div>
            </f7-button>
          </div>
        </template>
      </qm-blankPage>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: "pageNotFind",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
::v-deep.navbar {
  height: calc(88px * var(--ratio));
  .navbar-inner {
    justify-content: space-between;
    background-color: var(--color-fill-grey-inverse);
    .left {
      padding-left: calc(34px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
    .title {
      color: var(--color-ironblack);
      font-size: var(--font-size-maintitle);
    }
    .right {
      padding-right: calc(38px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
  }
}
.md .navbar a.link:before {
  content: none;
}
.margin {
  margin: 0 !important;
  margin-right: calc(24px * var(--ratio)) !important;
}
.button {
  max-width: 100%;
  line-height: normal;
  box-sizing: border-box;
  width: calc(152px * var(--ratio));
  height: calc(52px * var(--ratio));
  padding-left: 0;
  padding-right: 0;
  --f7-button-fill-pressed-bg-color: var(--color-brand);
  --f7-button-outline-border-color: var(--color-brand);
  --f7-button-fill-bg-color: var(--color-brand);
  color: var(--color-text-primary);
  .btn-title {
    height: 100%;
    width: 100%;
    font-size: var(--font-size-subcontent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.button-small {
  --f7-button-outline-border-width: 1px;
}
</style>
